import React, { Component } from 'react'
import { LeftOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { Upload, message, Radio, Button, Cascader } from 'antd';
import { withRouter } from "react-router-dom"
import { Form, Input } from 'antd';
import './info.css';
import request from '../../utils/request'


// import request from '../../utils/request'
// import axios from 'axios';

function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}

function beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
}

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};

const user = (values) => {
    let username = values.username
    console.log(username, '222');
    request.post("/orderList/nice/user/getEqualsUsername", { username }).then(res => {
      console.log(res, 'pd');
      if (res.data) {
        message.success('该用户名可以使用');
      }
      else {
        message.error('用户名已存在');

      }
    })
  }

class Info extends Component {
    state = {
        loading: false,
        img:'',
        username: '',
        password: '',

    };

      
        

    onFinish = ({ username, sex, area }) => {
        // console.log(values);
        
        // this.props.history.push({pathname:'/next', state:{ area: values.area,sex:values.sex,username:values.username}})
        this.props.history.push({pathname:`/next/${username}/${sex}/${area}`})
        // console.log(typeof(sex));
    };

    onFinishFailed = (errorInfo) => {

    };

    handleChange = info => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            getBase64(info.file.originFileObj, imageUrl =>
                this.setState({
                    imageUrl,
                    loading: false,
                }),
            );
        }
    };

    render() {
        const { loading, imageUrl } = this.state;
        const uploadButton = (
            <div>
                {loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div style={{ marginTop: 8 }}>添加头像</div>
            </div>
        );
        return (
            <div id='info'>
                <div>
                    <LeftOutlined onClick={() => this.props.history.go(-1)} style={{ paddingTop: '0.25rem', fontSize: '0.44rem', color: '#c3c3c3' }} />
                </div>
                <div className='con'>
                    <h2 style={{ fontSize: '0.62rem', fontWeight: 'bold', margin: '0.8rem 0 0.6rem' }}>个人信息</h2>
                    <Upload
                        name="avatar"
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="http://zxz.free.idcfengye.com/nice/user/uploadFile2"
                        beforeUpload={beforeUpload}
                        onChange={this.handleChange}
                    >
                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                    </Upload>
                    <Form
                        {...layout}
                        name="register"
                        initialValues={{
                            sex: 0,
                        }}
                        onFinish={this.onFinish}
                        onFinishFailed={this.onFinishFailed}
                    >
                        <Form.Item

                            label="用户名"
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入你的用户名!',
                                },
                            ]}
                        >
                            <Input placeholder='请输入你的用户名' style={{ border: '0' }} onBlur={user.bind(this)}/>
                        </Form.Item>
                        <Form.Item label="所在地"
                            name="area"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择你的所在地!',
                                },
                            ]} >
                            <Cascader
                                options={[
                                    {
                                        value: 'Liaoning',
                                        label: '辽宁',
                                        children: [
                                            {
                                                value: 'Shenyang',
                                                label: '沈阳',
                                            },
                                        ],
                                    },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item className='sex'
                            label="性&nbsp;  &nbsp; 别"
                            name="sex"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择你的性别!',
                                },
                            ]}>

                            <Radio.Group name="radiogroup" defaultValue={1}>
                                <Radio value={0}>男</Radio>
                                <Radio value={1}>女</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item {...tailLayout}>
                            <Button htmlType="submit" style={{ width: '100%', background: '#fae100', outline: 'none', border: 0, height: '1rem' }}>
                                下一步
                            </Button>
                        </Form.Item>

                    </Form>


                    {/* <Route path='/next' component={Next}></Route> */}
                    <p className='foot'>登录注册表示同意用户协议、隐私政策</p>
                </div>
            </div>
        )
    }
}
export default withRouter(Info)